<template>
  <div id="Room-management">
    <div class="address">
      <h3>房间管理
         <i class="qiehuan hotel-management-icon icon-jiantou_zuoyouqiehuan" @click="showPage = !showPage"></i>
      </h3>
    </div>
    <div class="all-room" v-show="!showPage">
      <div class="explain">
        <div class="one-color">
          <el-tag style="background-color:greenyellow"></el-tag>
          <span> 可入住 </span>
        </div>
        <div class="one-color">
          <el-tag style="background-color:#aa97b0"></el-tag>
          <span> 修缮中 | 打扫中 | 请打扫 </span>
        </div>
        <div class="one-color">
          <el-tag style="background-color:blue"></el-tag>
          <span> 已退房 </span>
        </div>
        <div class="one-color">
          <el-tag style="background-color:red"></el-tag>
          <span> 入住中 | 续住中 | 延时中 |勿扰中 </span> 
        </div>
      </div>
      <div v-if="roomTypes && typeRooms"> 
        
        <div class="one-type"  v-for="(type,id) in roomTypeTitle" :key="id">
          <h1>{{type}}</h1>
          <div class="one-type-room" >
            <el-tag :key="room.rin" v-for="room in typeRooms[id]" 
              :closable="false" :disable-transitions="false" 
              :style="{color:roomStatusColor[room.rsin]}"
              @click="selectOneRoom(room.rin)">
              {{room.rin}}
            </el-tag>
          </div>
        </div>
      </div>
      <div>&nbsp;</div>
      <div>&nbsp;</div>
    </div>

    <div class="show-Room-Type" v-show="showPage"> 
      <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
        <el-table
          :key="elTableKey"
          class="room-type-table TABLEMINWIDH"
          ref="multipleTable"
          :data="rooms"
          tooltip-effect="dark"
          :row-class-name="tableRowClassName"
          style="width: 100%;font-size: 1.5rem;"
          @selection-change="handleSelectionChange">
          <!-- 选择框 10-->
          <el-table-column
            type="selection"
            style="width:10%">
          </el-table-column>
          <!-- 预览 20-->
          <el-table-column
            label="预览"
            header-align="center"
            align="center"
            style="width:20%">
            <template slot-scope="scope">
              <img class="room-type-img" :src="scope.row.imgUrl">
            </template>
          </el-table-column>
          <!-- 房间 10-->
          <el-table-column
            prop="rin"
            label="房间"
            header-align="center"
            align="center"
            style="width:5%">
            <!-- <template slot-scope="scope">
              <el-input v-model="scope.row.title" v-if="scope.row.isEdit"></el-input>
              <span v-else>{{scope.row.title}}</span>
            </template> -->
          </el-table-column>
          <!-- 房型 + 价格 15-->
          <el-table-column
            header-align="center"
            align="center">
             <template slot="header" slot-scope="">
                <el-dropdown class="dropdown"  trigger="click">
                  <span class="el-dropdown-link">
                    房型<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="selectRoomType(type.title)" v-for="type in roomTypes" :key="type.title">{{type.title}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
             </template>
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
              <span class="money">
                <i class="hotel-management-icon icon-renminbi1688"></i>
                {{scope.row.price}}
              </span>
            </template>
          </el-table-column>
          <!-- 房型配置25 -->
          <el-table-column
            label="配置"
            header-align="center"
            align="center"
            style="width:25%"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="peizhi">{{scope.row.facility}}</span>
            </template>
          </el-table-column>
          <!-- 房间状态 10-->
          <el-table-column
            header-align="center"
            align="center"
            style="width:10%">
            <template slot="header" slot-scope="">
              <el-dropdown class="dropdown"  trigger="click">
                <span class="el-dropdown-link">
                  状态<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="selectStatus(status)" v-for="status in roomStatus" :key="status">{{status}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
             </template>
            <template slot-scope="scope">
              <el-select v-model="scope.row.input" :placeholder="roomStatus[scope.row.rsin]" v-if="scope.row.isEdit">
                <el-option
                  v-for="(item,id) in roomStatus"
                  :key="id"
                  :label="item"
                  :value="id"
                  @click.native="handleRoomStatusChange">
                </el-option>
              </el-select>
              <span v-else :style="{color:roomStatusColor[scope.row.rsin]}">{{roomStatus[scope.row.rsin]}}</span>
            </template>
          </el-table-column>
          <!-- 操作 10-->
          <el-table-column
            prop="description"
            header-align="center"
            align="center"
            style="width:10%">
            <template slot-scope="scope">
              <div v-if="scope.$index === editingData">
                <div class="one-bt">
                  <el-button type="danger" icon="el-icon-close" circle @click="cancelEdit(scope.row)">
                    <div class="float-block"><span>取消</span></div>
                  </el-button>
                </div>
                <div class="one-bt">
                  <el-button type="warning" icon="el-icon-notebook-2" circle @click="saveEdit(scope.row)" :disabled="!scope.row.isEdit">
                    <div class="float-block"><span>保存</span></div>
                  </el-button>
                </div>
              </div>
              <div class="editBT" @click="toEdit(scope.row, scope.$index)" v-else>
                <i class="el-icon-edit-outline"></i>
                编辑
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar><!-- /滚动条 -->
    </div>
  </div>
</template>

<script>
import { showMessage } from '@/utils/utils'
import { modifyOneRoomState } from '@/api/api'
import { roomTypeMixin } from '@/utils/mixins/roomType'
import { roomMixin } from '@/utils/mixins/room'
import { loadingMixin } from '@/utils/mixins/loading'
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  mixins : [roomMixin, loadingMixin, roomTypeMixin],
  name: "Room-management",
  data() {
    return {
      editArr: [],
      roomStatus:['可入住','入住中','已退房','续住中','修缮中','打扫中','延时中','勿扰中','请打扫','全部'],
      roomStatusColor:['greenyellow','red','blue','red','#aa97b0','#aa97b0','red','red','#aa97b0'],

      editingData: Math.random(),
      input:'',

      Show:[],

      elTableKey:Math.random(),

      showPage: true,
      typeRooms : undefined,
      roomTypeTitle : [],
    }
  },
  watch : {
    roomTypes: { 
      immediate : true,
      handler : function(newVal, oldVal) {
        //房型下拉数据量大于0时刷新表格
        if(newVal) this.elTableKey = Math.random()
      }
    },
  },
  methods:{
    // 筛选出具体的房间并转换页面
    selectOneRoom(rin) {
      for(let i in this.rooms) {
        this.Show[i] = false
      }
      for(let i in this.rooms) {
        if(this.rooms[i].rin === rin) this.Show[i] = true
      }
      this.showPage = true
    },
    // 触发改变
    handleRoomStatusChange() {
      this.elTableKey = Math.random()
    },
    // 筛选房型
    selectRoomType(type) {
      for(let i in this.rooms) {
        this.Show[i] = true
      }
      if(type === '全部') {
        this.elTableKey = Math.random()
        return
      }
      for(let i in this.rooms) {
        if(this.Show[i]) {
          if(this.rooms[i].title === type) this.Show[i] = true
          else this.Show[i] = false
        }
      }
      this.elTableKey = Math.random()
    },
    // 筛选状态
    selectStatus(status) { 
      for(let i in this.rooms) {
        this.Show[i] = true
      }
      if(status === '全部') {
       this.elTableKey = Math.random()
       return
      } 
      let rsin = this.roomStatus.indexOf(status)
      for(let i in this.rooms) {
        if(this.Show[i]) {
          if(this.rooms[i].rsin === rsin) this.Show[i] = true
          else this.Show[i] = false
        }
      }
      this.elTableKey = Math.random()
    },
    // 隐藏一行数据
    tableRowClassName(item) {
      if(this.Show[item.rowIndex] === false) return 'hide-one-row'
      return ''
    },
    // 取消编辑
    cancelEdit(item) {
      item.isEdit = false
      this.editingData = -1
    },
    // 进入编辑
    toEdit(item, index) {
      item.isEdit = true
      this.editingData = index
    },
    // 保存编辑
    saveEdit(item) {
      modifyOneRoomState(item.rin,{
        rin: item.rin, rsin: item.input, tin: item.tin
      }).then(response => {
        if(response.data === "修改成功！"){
          showMessage(this, '修改成功', 'success')
          item.rsin = item.input
          item.isEdit = false
          this.editingData = -1
        }
      }).catch(error => showMessage(this, '修改失败', 'error'))
    },
    // 修改操作状态
    changeStatus(index) {
      this.editingData = index
    },
    handleSelectionChange(val){
      
    },
    // 数据加载 及处理
    async load() {
      await this.updateRooms()
      await this.updateRoomType()
      this.roomTypes.forEach(e => this.roomTypeTitle.push(e['title']));
      this.typeRooms = new Array(this.roomTypes.length)
      for(let i = 0; i < this.typeRooms.length; i++) {
        this.typeRooms[i] = []
        for(let obj2 of this.rooms) {
          if(this.roomTypes[i].tin === obj2.tin) {
            obj2['canEdit'] = false
            this.typeRooms[i].push(obj2)
          }
        }
      }
      this.roomTypes.push({"facility":"1","price":2999,"title":"全部","tin":100})
      for(let obj of this.rooms) {
        obj['imgUrl'] = require("@/assets/images/单人大床房.webp")
        this.editArr.push(false)
        for(let obj2 of this.roomTypes) {
          if(obj.tin === obj2.tin) {
            obj['price'] = obj2.price
            obj['facility'] = obj2.facility
            obj['title'] = obj2.title
            obj['isEdit'] = false
            obj['input'] = ""
            obj['isShow'] = true
            this.Show.push(true)
          }
        }
      }
    },
  },
}
</script>

<style >
#Room-management .el-table__row:hover .editBT{
  display: block;
}
#Room-management .el-input__inner{
  font-size: 1.5rem;
}
#Room-management .one-bt .el-button [class*=el-icon-]+span {
  margin: 0;
}
#Room-management .cell{
  overflow: visible;
}
#Room-management .el-table__header{
  height: 6rem;
}
#Room-management .el-table .hide-one-row{
  display: none;
}
</style>
<style lang="less" scoped>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
  .qiehuan{
    float: right;
    font-size: 40px;
    margin-right: 30px;
    &:hover{
      color: #409EFF;
    }
  }
}
.room-type-img{
  height: 8rem;
}
//小组件
.one-bt{
  display: inline-block;
  position: relative;
  margin-left: 20px;
  .float-block{
    visibility: hidden;
    width: 100%;
    float: left;
    font-size: 1rem;
    color: #aa97b0;
    text-align: center;
    position: absolute;
    margin-bottom: 5px;
    top: -20px;
    left: 0px;
    z-index: 13;
  }
  .el-button:hover .float-block{
    visibility: visible;
  }
}
.dropdown{
  font-size: 1.5rem;
  color: #909399;
}
#Room-management{
  .editBT{
    color: #aa97b0;
    display: none;
    cursor: default;
  }
  .all-room{
    background-color: #ffffff;
    padding-top: 20px;
    &:hover{
      cursor: default;
    }
    .explain{
      margin: 0 auto;
      width: 70%;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .one-color{
        display: inline-block;
        .el-tag{
          width: 51px;
        }
        span{
          line-height: 35px;
          vertical-align: middle;
        }
      }
    }
  }
  .money{
    display: inline-flex;
    align-items: center;
    color: red;
    position: relative;
    top: -2px;
    margin-left: 5px;
  }
  .one-type{
    background-color: #ffffff;
    h1{
      color: #aa97b0;
      // background-color: aqua;
      height: 4rem;
      padding-left: 20px;
      display: inline-flex;
      align-items: center;
    }
    .one-type-room{
      box-sizing: border-box;
      padding-left: 64px;
      // background-color: aqua;
      height: 50px;
      display: flex;
      align-items: center;
      .input-new-tag{
        width: 60px;
      }
      .el-tag{
        margin-right: 20px;
        &:hover{
          border-color: blue;
        }
      }
      .edit{
        margin-left: 40px;
        color: #aa97b0;
        height: 32px;
        position: relative;
        top: 4px;
        &:hover{
          cursor: default;
        }
        display: none;
      }
    }
  }
}
.peizhi{
  display: inline-block;
  width: 270px;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
  line-height: 2rem;
}
</style>

